<template>
  <div>
    <el-form labelWidth="100px">
      <el-form-item label="类别姓名" class="is-required">
        <el-input v-model="typename" v-validate="'required'" name="类别姓名"></el-input>
        <div class="el-form-item__error">{{ errors.first('类别姓名') }}</div>
      </el-form-item>
      <el-form-item label="所属指标" class="is-required">
        <el-select v-model="nid" placeholder="请选择" style="width:100%" v-validate="'required'"
          name="所属指标"
        >
          <el-option
            v-for="item in zbSelect"
            :key="item.hash.id"
            :label="item.hash.nname"
            :value="item.hash.id"
          >
          </el-option>
        </el-select>
        <div class="el-form-item__error">{{ errors.first('所属指标') }}</div>
      </el-form-item>
      <el-form-item label="排序" class="is-required">
        <el-input-number v-model="sortNum" style="width:100%" controlsPosition="right"
          :min="1"
          :max="10"
        ></el-input-number>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ts: this.newStore(),
      sortNum: '',
      queryname: '',
      sortList: [],
      zbSelect: [],
      sortData: {},
      nid: '',
      typename: '',
    };
  },
  created() {
    this.getzbSelect();
  },
  props: ['showSort'],
  methods: {
    reset() {
      this.typename = '';
      this.nid = '';
      this.sortNum = '';
    },
    getzbSelect() {
      const req = {
        handle: 'B37BA078041E48C700BF5F304574952AABE29D02A6FDC4E5',
        nname: '',
        nclassifyname: '',
        limit: '1000',
        supnclassify: '0101',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.zbSelect = ts.d.data.operation1;
      });
    },
    savenewSort() {
      this.$validator.validateAll().then((result) => {
        if (result) {
          const req = {
            handle: '2E8E7DE13E3E62949CFDA5DB7E2B7680B4DAEBDD8A8CB49AFAD57CD578ACFB41',
            typename: this.typename,
            nid: this.nid,
            sort: this.sortNum,
          };
          this.$confirm('确定提交?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }).then(() => {
            this.spost(this.ts, '/mainservlet', req).then(() => {
              this.$message({
                type: 'success',
                message: '提交成功!',
              });
              this.$emit('changeshowsort');
              this.reset();
            });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消',
            });
          });
        } else {
          this.$message.error('内容不能为空！');
          return false;
        }
      });
    },
  },
};
</script>

<style lang="stylus">
.el-form-item.is-required .el-form-item__label:before
  content: '*'
  color: #f56c6c
  margin-right: 4px
.el-input--suffix .el-input__inner
  font-size 13px
.el-button
  font-size 13px
.el-table th>.cell
  text-align center
.el-table .cell
  text-align center
.el-select
  width 14%
  margin-right 1%
.select_top
  width 92%
  margin 20px auto
.el-col
  padding: 20px 10px;
</style>
